<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>商品详细页面</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_list.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_goods.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_goodPic.css" type="text/css"/>
<%--    <link rel="stylesheet" href="render/css/frontend/HFAlert.css" type="text/css"/>--%>
    <link rel="stylesheet" href="render/css/font-awesome.min.css" type="text/css"/>
    <%--<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">--%>

    <style type="text/css">
        a.mygoods_sub.goods_sub_gou:hover {
            color: red;
            text-decoration: none;
        }
        a.mygoods_sub.goods_sub_gou {
            text-align: center;
            float: left;
            overflow: hidden;
            width: 140px;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
            background-color: #fee49b;
            color: #98360b;
            font-size: 18px;
            font-weight: 600;
            /* padding-left: 18px; */
        }
        input#goods_001 {
            width: 72px;
        }
        .comment ul {
            list-style: none;
            margin-left: 0;
            padding-left: 0;
        }

        .comment .comment-body {
            padding: 5px;
            /* border: solid #009a61 1px; */
            border-radius: 4px;
            background: rgba(255, 255, 255, .7);
            -moz-box-shadow: 0 1px 0 #e4e4e4;
            -webkit-box-shadow: 0 1px 0 #e4e4e4;
            box-shadow: 0 1px 0 #c1c1c1;
        }

        .comment .comment-body .cheader {
            display: block;
            height: 27px;
        }

        .comment .comment-body .cheader .user-img {
            float: left !important;
            position: relative;
        }

        .userImage {
            padding: 2px;
            border: 1px solid #ccc;
            width: 50px;
            height: 50px;
        }

        .comment .comment-body .cheader .user-info {
            float: left !important;
            padding-left: 5px;
        }

        .comment .comment-body .cheader .user-info .comment_name {
            padding: 0 0 0 3px;
            margin: 0;
            line-height: initial;
        }

        .comment .comment-body .cheader .user-info .comment_timer {
            background-color: rgba(255, 255, 255, .7);
            color: #999aaa;
            font-size: 12px;
            margin-right: 4px;
            /* display: inline-block; */
            position: relative;
        }

        .content {
            padding: 8px 10px 10px 79px;
            /* border-bottom: 1px dotted #ddd; */
            font-size: 12px;
        }

        .sign {
            overflow: visible !important;
            line-height: 2;
            padding: 5px;
            background-color: rgba(255, 255, 255, .7);
            color: #999aaa;
            font-size: 12px;
        }

        .comment-down:hover {
            color: green;
        }
        .comment-down {
            float: right;
            color: #ff9609;
        }

        .comment-up:hover {
            color: red;
        }
        .comment-up {
            margin-right: 20px;
            float: right;
            color: #151507;
        }
        p.store {
            color: #f27102;
            margin: 11px 0 0 0;
        }
        p.store_reply {
            margin: 11px 0 0 0;
            color: #cc0000;
        }

        .tuijian_content_2_empty {
            /* margin: 80px 0; */
            margin: 146px 0px 146px 0px !important;
            text-align: center;
            font-size: 33px;
            width: 100% !important;
            color: red;
        }
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
        <a href="/">首页</a>&nbsp;›&nbsp;
        <a href="javascript:void(0);">商品详细</a>&nbsp;›&nbsp;
        <a href="/render/product/product_detail?id=${product.id}">${product.name}</a>
    </span>
</div>
<div class="clear"></div>
<!-- 面包屑 End -->
<!-- Header End -->

<!-- Goods Body -->
<div class="shop_goods_bd clear">

    <!-- 商品展示 -->
    <div class="shop_goods_show">
        <div class="shop_goods_show_left">
            <!-- 京东商品展示 -->
            <div id="preview">
                <div class=jqzoom id="spec-n1" onClick="window.open('/')">
                    <img height="350" src="${product.main_image}" jqimg="${product.main_image}" width="350">
                </div>
                <div id="spec-n5">
                    <div class=control id="spec-left">
                        <img src="render/images/left.gif"/>
                    </div>
                    <div id="spec-list" class="my-spec-list">
                        <ul class="list-h">
                            <li><img src="${image_left}"></li>
                            <li><img src="${image_center}"></li>
                            <li><img src="${image_right}"></li>
                            <li><img src="${image_left}"></li>
                            <li><img src="${image_center}"></li>
                            <li><img src="${image_right}"></li>
                            <li><img src="${image_left}"></li>
                            <li><img src="${image_center}"></li>
                            <li><img src="${image_right}"></li>
                        </ul>
                    </div>
                    <div class=control id="spec-right">
                        <img src="render/images/right.gif"/>
                    </div>
                </div>
            </div>
            <!-- 京东商品展示 End -->
        </div>
        <div class="shop_goods_show_right">
            <ul>
                <li>
                    <label>商品名：</label>
                    <strong style="font-size:14px; font-weight:bold;">${product.name}</strong>
                </li>
                <li>
                    <label>副标题：</label>
                    <span>${product.subtitle}</span>
                </li>
                <li>
                    <label>价格：</label>
                    <span><strong>${product.price }</strong>(元)</span>
                </li>
                <li>
                    <label>累计售出：</label>
                    <span>${product.sale_count}件</span>
                </li>
                <li>
                    <label>评价：</label>
                    <span>${comments.size()}条评论</span>
                </li>
                <li>
                    <label>店家：</label>
                    <a href="/render/shop/queryShopByShopId?shop_id=${product.shop_id}"><span>${shop.shop_name}</span></a>
                </li>
                <li class="goods_num">
                    <label>购买数量：</label>
                    <span>
                        <a href="javascript:void(0);" did="danjia_001" xid="xiaoji_001" ty="-"
                           class="cart-decrease good_num_jian this_good_nums cart-change-button" valId="goods_001"></a>
                        <input type="text" value="1" id="goods_001" class="good_nums item-num-input"/>
                        <a href="javascript:void(0);" did="danjia_001" xid="xiaoji_001" ty="+"
                           class="cart-increase good_num_jia this_good_nums cart-change-button" valId="goods_001"></a>
                        (当前库存<span class="product_stock">${product.stock}</span>件)
                    </span>
                </li>
                <li style="padding:20px 0;">
                    <label>&nbsp;</label>
                    <span>
                        <a href="/render/cart/buyOne?pid=${product.id}" id="buy-link" style="display:none;"><span id="buy_link_btn"></span></a>
                        <a href="javascript:void(0);" onclick="buyOne('/render/cart/buyOne?pid=${product.id}')" class="mygoods_sub goods_sub_gou">立即购买</a>
                        <a href="javascript:void(0);" onclick="addCart('/render/cart/addCart?pid=${product.id}')" class="mygoods_sub goods_sub_gou">加入购物车</a>
                    </span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 商品展示 End -->

    <div class="clear mt15"></div>
    <!-- Goods Left -->
    <div class="shop_bd_list_left clearfix">
        <!-- 热卖推荐商品 -->
        <div class="shop_bd_list_bk clearfix">
            <div class="title">热卖推荐商品</div>
            <div class="contents clearfix">
                <ul class="clearfix">
                    <c:if test="${!empty product_sale_count}">
                        <c:forEach items="${product_sale_count}" var="product" begin="0" end="1">
                            <li class="clearfix">
                                <div class="goods_name">
                                    <a href="/render/product/product_detail?id=${product.id}">${product.name}</a>
                                </div>
                                <div class="goods_pic">
                                    <span class="goods_price">¥ ${product.price} </span>
                                    <a href="/render/product/product_detail?id=${product.id}">
                                        <img src="${product.main_image}"/>
                                    </a>
                                </div>
                                <div class="goods_xiaoliang">
                                    <span class="goods_xiaoliang_link"><a href="/render/product/product_detail?id=${product.id}">去看看</a></span>
                                    <span class="goods_xiaoliang_nums">已销售<strong>${product.sale_count}</strong>笔</span>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                </ul>
            </div>
        </div>

        <!-- 热卖推荐商品 -->
        <div class="clear"></div>

    </div>
    <!-- Goods Left End -->

    <!-- 商品详情 -->
    <div class="shop_goods_bd_xiangqing clearfix">
        <div class="shop_goods_bd_xiangqing_tab">
            <ul>
                <li id="xiangqing_tab_1" onmouseover="shop_goods_easytabs('1', '1');"
                    onfocus="shop_goods_easytabs('1', '1');" onclick="return false;">
                    <a href="javascript:void(0);"><span>商品详情</span></a>
                </li>
                <li id="xiangqing_tab_2" onmouseover="shop_goods_easytabs('1', '2');"
                    onfocus="shop_goods_easytabs('1', '2');" onclick="return false;">
                    <a href="javascript:void(0);"><span>商品评论</span></a>
                </li>
                <%--<li id="xiangqing_tab_3" onmouseover="shop_goods_easytabs('1', '3');"
                    onfocus="shop_goods_easytabs('1', '3');" onclick="return false;">
                    <a href="javascript:void(0);"><span>商品咨询</span></a>
                </li>--%>
            </ul>
        </div>
        <div class="shop_goods_bd_xiangqing_content clearfix">

            <div id="xiangqing_content_1" class="xiangqing_contents clearfix" style="display: block;">
                <c:if test="${!empty product.detail}">
                    <p>${product.detail}</p>
                </c:if>

                <c:if test="${empty product.detail}">
                    <p class="tuijian_content_2_empty">店家尚未填写该商品详情，谨慎购买！！！</p>
                </c:if>
            </div>

            <div id="xiangqing_content_2" class="xiangqing_contents clearfix" style="display: none;">
                <%--点击该商品网页----获取商品信息（product、comment）----根据product_id----查询该商品评价--%>
                <%--评价人id、名字、头像--%>
                <ul class="comment">
                    <c:if test="${!empty comments}">
                        <c:forEach items="${comments}" var="comment">
                            <li>
                                <div class="comment-body">
                                    <div class="cheader">
                                        <div class="user-img">
                                            <img class="userImage" src="${comment.user_image}"/>
                                        </div>
                                        <div class="user-info">
                                            <div class="comment_name">${comment.user_name}</div>
                                            <div class="comment_timer"><fmt:formatDate type="both" dateStyle="long" timeStyle="long" value="${comment.create_time}" /></div>
                                        </div>
                                        <div class="sign">
                                            <a href="javascript:void(0);" class="comment-down" onclick="comment_oppose('${comment.id}',this)">
                                                <i class="fa fa-thumbs-o-down"></i>踩(<span class="count">${comment.oppose==null?0:comment.oppose}</span>)
                                            </a>
                                            <a href="javascript:void(0);" class="comment-up" onclick="comment_support('${comment.id}',this)">
                                                <i class="fa fa-thumbs-o-up"></i>赞(<span class="count">${comment.support==null?0:comment.support}</span>)
                                            </a>
                                        </div>
                                    </div>
                                    <div class="content">
                                        <div>
                                            <p>${comment.content}</p>
                                            <c:if test="${!empty comment.reply}">
                                                <p class="store">店家回复:</p>
                                                <p class="store_reply">&nbsp;&nbsp;&nbsp;${comment.reply}</p>
                                            </c:if>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </c:if>
                    <c:if test="${empty comments}">
                        <p class="tuijian_content_2_empty">该商品尚无评论</p>
                    </c:if>
                </ul>
            </div>

            <%--<div id="xiangqing_content_3" class="xiangqing_contents clearfix" style="display: none;">
&lt;%&ndash;                <c:if test="${empty comments}">&ndash;%&gt;
                    <p class="tuijian_content_2_empty">该功能尚未实现，敬请期待！</p>
&lt;%&ndash;                </c:if>&ndash;%&gt;
            </div>--%>

        </div>
    </div>
    <!-- 商品详情 End -->
</div>
<!-- Goods Body End -->

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>

<!-- Footer End -->
<script type="text/javascript" src="render/js/frontend/shop_goods_tab.js"></script>
<script type="text/javascript" src="render/js/frontend/lib.js"></script>
<script type="text/javascript" src="render/js/frontend/shop_goodPic_base.js"></script>
<script type="text/javascript" src="render/js/frontend/163css.js"></script>

<script type=text/javascript>

    <%--点赞某个评论--%>
    function comment_support(id,target) {
        // target.unbind();
        $.ajax({
            type: "post",
            url: "/render/comment/doSupport/" + id,
            success: function (json) {
                if(json.success){
                    // $(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '<i class="fa fa-smile-o"></i>+1'});
                    var oldCount = $(target).find('span.count').text();
                    $(target).find('span.count').text(parseInt(oldCount) + 1);
                    HFalert({title: json.message, type: 'success', confirmButtonText: '确定'});
                }
            }
        });
    }

    <%--踩某个评论--%>
    function comment_oppose(id,target) {
        // target.unbind();
        $.ajax({
            type: "post",
            url: "/render/comment/doOppose/" + id,
            success: function (json) {
                if(json.success){
                    // $(target).effectBubble({y:-80, className:'thumb-bubble', fontSize: 1, content: '<i class="fa fa-meh-o"></i>+1'});
                    var oldCount = $(target).find('span.count').text();
                    $(target).find('span.count').text(parseInt(oldCount) + 1);
                    HFalert({title: json.message, type: 'success', confirmButtonText: '确定'});
                }
            }
        });
    }

    function addCart(url){
        var buynum = $("#goods_001").val();
        var add_url=url+"&num="+buynum;

        // var flag=true;
        if (buynum <= 0) {
            HFalert({title:'购买件数不能小于1',type: 'warning', confirmButtonText: '确定'});
            return;
            // flag=false;
        }

        var stock='${product.stock}';
        if(buynum>stock){
            HFalert({title: "购买件数不能超过库存", type: 'warning', confirmButtonText: '确定'});
            return;
        }

        // if (flag){
            $.ajax({
                url : add_url,
                type : "get",
                success : function(data) {
                    if (data.success){
                        HFalert({title:data.message, type:'success', confirmButtonText: '确定'});
                        return;
                    }

                    if (data.message == null || data.message === "") {
                        window.location.href="/render/login";
                        return;
                    }
                    HFalert({title:data.message, type: 'warning', confirmButtonText: '确定'});
                }
            });
        // }
    }

    function buyOne(url) {
        var buynum = $("#goods_001").val();
        var stock='${product.stock}';
        if(buynum<=0){
            HFalert({title: "购买件数不能小于1", type: 'warning', confirmButtonText: '确定'});
            return;
        }

        if(buynum>stock){
            HFalert({title: "购买件数不能超过库存", type: 'warning', confirmButtonText: '确定'});
            return;
        }

        var add_url=url+"&num="+buynum;
        $("#buy-link").attr("href",add_url);
        /*click事件直接绑定到<a>标签上，必须绑定到<a> 标签之内的元素上。*/
        $("#buy_link_btn").click();
        /*$.ajax({
            type: "get",
            url: add_url,
            success: function (json) {
                if(!json.success){
                    // HFalert({title: json.message, type: 'success', confirmButtonText: '确定'});
                    HFalert({title: json.message==null?"用户未登录":json.message, type: 'warning', confirmButtonText: '确定'});
                }
            }
        });*/
    }

    $(function () {

        $("#buy-button").click(function () {
            $.ajax({
                type: "get",
                url: $("#buy-link").attr("href")+"&num="+$("#buy-number").val(),
                success: function (json) {
                    if(json.success){
                        HFalert({title: json.message, type: 'success', confirmButtonText: '确定'});
                    }else {
                        HFalert({title: json.message, type: 'warning', confirmButtonText: '确定'});
                    }
                }
            });
            return false;
        });

        $(".jqzoom").jqueryzoom({
            xzoom: 400,
            yzoom: 400,
            offset: 10,
            position: "right",
            preload: 1,
            lens: 1
        });

        $(".my-spec-list").jdMarquee({
            deriction: "left",
            width: 350,
            height: 56,
            step: 2,
            speed: 4,
            delay: 10,
            control: true,
            _front: "#spec-right",
            _back: "#spec-left"
        });

        $("#spec-list img").bind("mouseover", function () {
            var src = $(this).attr("src");
            $("#spec-n1 img").eq(0).attr({
                src: src.replace("\/n5\/", "\/n1\/"),
                jqimg: src.replace("\/n5\/", "\/n0\/")
            });
            $(this).css({
                "border": "2px solid #ff6600",
                "padding": "1px"
            });
        }).bind("mouseout", function () {
            $(this).css({
                "border": "1px solid #ccc",
                "padding": "2px"
            });
        });

        // 增减数量----  stock="1" buy = "2" price-per="3" ciid="4"
        $(".cart-change-button").click(function () {
            var stock = Number($(".product_stock").text());
            var num = Number($("#goods_001").val());
            if (num < stock && $(this).attr("class").indexOf("in") > 0) {
                $("#goods_001").val(++num);
            } else if (num > 1 && $(this).attr("class").indexOf("de") > 0) {
                $("#goods_001").val(--num);
            }
        });
    })

</script>
</body>
</html>